<template>
	<view class="form">
		<u-tabs @change="tabChange" :list="typeList" lineWidth="30" lineColor="rgb(118, 118, 238)" :activeStyle="{
	            color: 'rgb(118, 118, 238)',
	             fontWeight: 'bold',
	             transform: 'scale(1.05)',
	         }" :inactiveStyle="{
	           color:'rgb(102, 102, 102)',
	 		  transform: 'scale(1)'
	 			
	         }" itemStyle="{padding-left: 15px; padding-right: 15px; height: 40px; flex: 1;}">
		</u-tabs>
		<u-line color="rgb(229, 230, 235)"></u-line>
		<view class="order-container">

			<u--form labelPosition="left" :model="orderModel" ref="orderForm" labelWidth="110"
				:errorType="'border-bottom'">
				<u-form-item prop="remark">
					<u--textarea border="none"
						:placeholder="currentOrderType!==3 ?  '请输入帮单具体情况，如取件码，快递单号等':'这里是万能帮，你可以发布校园内一切需要帮忙的需求，例如：打印、找人、排队等'"
						v-model="orderModel.remark" height="100"></u--textarea>
				</u-form-item>

				<u-form-item prop="sourceAddress" borderBottom ref="item1" v-if="currentOrderType!==3">
					<image :src="sourceIcon" mode="" class="icon"></image>
					<u--input v-model="orderModel.sourceAddress" :placeholder="sourcePlaceHolder" border="none">
					</u--input>
				</u-form-item>

				<u-form-item prop="targetAddress" borderBottom ref="item1">
					<image :src="targetIcon" mode="" class="icon"></image>
					<u--input v-model="orderModel.targetAddress" :placeholder="targetPlaceHolder" border="none">
					</u--input>
				</u-form-item>

				<u-form-item label="期望送达时间" prop="requireTime" borderBottom
					@click="showRequireTime = true; hideKeyboard()" ref="item1">
					<u--input v-model="orderModel.requireTime" disabled disabledColor="#ffffff" inputAlign="right"
						placeholder="请选择期望送达时间" border="none"></u--input>
					<u-icon slot="right" name="arrow-right" class="arrow"></u-icon>
				</u-form-item>

				<u-form-item label="物品重量/大小" prop="itemSize" borderBottom @click="showItemSize = true; hideKeyboard()"
					v-if="currentOrderType===0||currentOrderType===1">
					<u--input v-model="orderModel.itemSize" disabled disabledColor="#ffffff" placeholder="请选择物品重量/大小"
						border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" class="arrow"></u-icon>
				</u-form-item>

				<u-form-item label="接单限制" prop="sexLimitText" borderBottom @click="showSex = true; hideKeyboard()"
					ref="item1">
					<u--input v-model="orderModel.sexLimitText" disabled disabledColor="#ffffff" placeholder="请选择性别限制"
						inputAlign="right" border="none"></u--input>
					<u-icon slot="right" name="arrow-right" class="arrow"></u-icon>
				</u-form-item>

				<u-form-item label="快递数量" prop="itemCount" borderBottom
					v-if="currentOrderType===0||currentOrderType===1">
					<u-number-box v-model="orderModel.itemCount" @change="itemCountChange"></u-number-box>
				</u-form-item>

				<u-form-item label="费用" prop="amount" borderBottom ref="item1">
					<u--input v-model="orderModel.amount" border="none" inputAlign="right" disabled
						disabledColor="#ffffff"></u--input>
				</u-form-item>

			</u--form>
			<u-action-sheet :show="showSex" :actions="sexLimitActions" title="请选择性别限制" @close="showSex = false"
				@select="sexSelect">
			</u-action-sheet>

			<u-action-sheet :show="showItemSize" :actions="itemSizeActions" title="请选择物品重量"
				@close="showItemSize = false" @select="itemSizeSelect">
			</u-action-sheet>
			<u-datetime-picker :show="showRequireTime" :value="requireTime" mode="datetime" closeOnClickOverlay
				@confirm="requireTimeConfirm" @cancel="requireTimeClose" @close="birthdayClose"></u-datetime-picker>

		</view>

		<view class="bottom">
			<u-line color="rgb(229, 230, 235)"></u-line>
			<view class="operation">
				<view class="price">
					<text class="text">实付款：</text>
					<text class="money"> ￥{{orderModel.amount}}.00</text>
				</view>
				<view class="button">
					<u-button text="立即支付" shape="circle" @click="submit"
						color="linear-gradient(135.00deg, rgba(118,118,238,1.00) 0.321%,rgba(138,138,238,1.00) 100%)">
					</u-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				baseAmount: 5,
				baseItemSizeAmout: 0,
				//订单类型：0：帮我取，1:帮我寄，2:帮我买，3:万能帮
				currentOrderType: 0,
				sourceIcon: '../../static/img/qu.png',
				targetIcon: '../../static/img/song.png',
				sourcePlaceHolder: '去哪里取',
				targetPlaceHolder: '送到哪里去',
				top4OrderList: [], //发布的帮单信息
				typeList: [{
					name: '帮我取',
				}, {
					name: '帮我寄',
				}, {
					name: '帮我买'
				}, {
					name: '万能帮'
				}],

				orderModel: {
					remark: '',
					sourceAddress: '',
					targetAddress: '',
					requireTime: '',
					itemSize: '',
					itemCount: 1,
					sexLimit: '',
					amount: 5
				},
				showSex: false,
				showItemSize: false,
				showRequireTime: false,
				requireTime: Number(new Date()),
				sexLimitActions: [{
						name: '限男生',
						value: 1
					},
					{
						name: '限女生',
						value: 2
					},
					{
						name: '不限性别',
						value: 0
					},
				],
				itemSizeActions: [{
						name: '小于5斤',
						amount: 5
					},
					{
						name: '5-10斤',
						amount: 10
					},
					{
						name: '10-20斤',
						amount: 20
					}, {
						name: '20-50斤',
						amount: 30
					},
				],
				rules: {
					'remark': {
						type: 'string',
						required: true,
						message: '请填写帮单具体情况',
						trigger: ['blur', 'change']
					},
					sourceAddress: {
						type: 'string',
						required: true,
						message: '请填写去哪里取',
						trigger: ['blur']
					},
					targetAddress: {
						type: 'string',
						required: true,
						message: '请填写送到哪里去',
						trigger: ['blur']
					},
					'sexLimit': {
						type: 'string',
						required: true,
						message: '请选择抢单限制',
						trigger: ['blur', 'change']
					},
					'itemCount': {
						type: 'number',
						required: true,
						message: '请选择快递数量',
						trigger: ['change'],


					},
					'requireTime': {
						type: 'string',
						required: true,
						message: '请选择期望送达时间',
						trigger: ['change']
					},
					'itemSize': {
						type: 'string',
						required: true,
						message: '请选择物品重量/大小',
						trigger: ['change']
					},

				}

			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.orderForm.setRules(this.rules)
		},
		methods: {
			tabChange(e) {

				this.currentOrderType = e.index

				switch (this.currentOrderType) {

					case 0:
						this.sourceIcon = '../../static/img/qu.png'
						this.targetIcon = '../../static/img/song.png'
						this.sourcePlaceHolder = '去哪里取'
						this.targetPlaceHolder = '送到哪里去'

						break;

					case 1:
						this.sourceIcon = '../../static/img/qu.png'
						this.targetIcon = '../../static/img/ji.png'
						this.sourcePlaceHolder = '在哪里取件'
						this.targetPlaceHolder = '要寄到哪里'

						break
					case 2:
						this.sourceIcon = '../../static/img/buy.png'
						this.targetIcon = '../../static/img/song.png'
						this.sourcePlaceHolder = '在哪里买'
						this.targetPlaceHolder = '要送到哪里'
						break
					case 3:
						this.targetIcon = '../../static/img/fu.png'
						this.targetPlaceHolder = '服务地址'
						break
				}

			},

			sexSelect(e) {
				this.orderModel.sexLimit = e.value
				this.$refs.orderForm.validateField('sexLimit')
				this.orderModel.sexLimitText = e.name
			},
			itemSizeSelect(e) {
				this.orderModel.itemSize = e.name
				this.baseItemSizeAmout = e.amount
				this.orderModel.amount = e.amount * this.orderModel.itemCount
				this.$refs.orderForm.validateField('itemSize')
			},


			itemCountChange(e) {
				this.orderModel.itemCount = e.value
				if (!this.baseItemSizeAmout) {
					this.orderModel.amount = this.baseAmount * this.orderModel.itemCount
				} else {
					this.orderModel.amount = this.baseItemSizeAmout * this.orderModel.itemCount
				}
				this.$refs.orderForm.validateField('itemCount')
			},
			requireTimeClose() {
				this.showRequireTime = false
				this.$refs.orderForm.validateField('requireTime')
			},
			requireTimeConfirm(e) {
				this.showRequireTime = false
				this.orderModel.requireTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				this.$refs.orderForm.validateField('requireTime')
			},
			submit() {
				const userInfo = this.$store.getters?.userInfo?.userInfoDetail || null
				console.log(userInfo)
				console.log(this.orderModel)
				this.$refs.orderForm.validate().then(res => {
					const data = {
						"uid": userInfo.uid,
						"userName": userInfo.userName,
						"orderType": this.currentOrderType,
						"sourceAddress": this.orderModel.sourceAddress,
						"sourcePhone": userInfo.userPhone,
						"targetAddress": this.orderModel.targetAddress,
						"targetPhone": userInfo.userPhone,
						"remark": this.orderModel.remark,
						"requireTime": this.orderModel.requireTime,
						"timeLong": "",
						"amount": this.orderModel.amount,
						"itemSize": this.orderModel.itemSize,
						"itemCount": this.orderModel.itemCount,
						"sexLimit": this.orderModel.sexLimit,
					}
					this.$http('post', 'api/private/order/create', {
						data,
						success: (res) => {
							// 发布成功，返回上一页并刷新数据
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2];


								uni.navigateBack({
									delta: 1,
									success: () => {
										console.log(beforePage.route)
										if (beforePage.route ===
											"pages/helpSquare/index") {
											beforePage.$vm.getOrder()

										} else if (beforePage.route ===
											"pages/index/index") {
											beforePage.$vm.getTop4Order()
										}
									}
								})
							}, 1000)
						},
						successMsg: '发布帮单成功！帮单验证码可前往我发布的帮单详情页查看'
					})
				}).catch(errors => {
					uni.$u.toast('请将帮单标红部分填写完整！')
				})
			},

			hideKeyboard() {
				uni.hideKeyboard()
			}
		},
	}
</script>


<style scoped lang="scss">
	::v-deep .u-tabs .u-tabs__wrapper__nav__item {
		flex: 1;

	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 14px;
	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: end;
	}

	::v-deep .u-number-box__plus {
		background-color: rgb(163, 181, 250) !important;
	}


	::v-deep .u-textarea {
		background: rgb(242, 242, 242);
		border-radius: 8px;
	}

	.form {
		height: 100vh;
		background: #fff;

	}

	.order-container {
		padding: 15px;

		.icon {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}

		.arrow {
			margin-left: 10px;
		}


	}


	.bottom {
		height: 90px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		bottom: 10px;
		position: fixed;

		.operation {
			padding: 0 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: calc(100% - 30px);

		}

		.text {
			color: rgb(51, 51, 51);
			font-size: 14px;
		}

		.money {
			color: rgb(255, 104, 83);
			font-size: 14px;
		}

		.button {
			width: 200px;
		}
	}
</style>